<template>
  <div class="shop-homepage">
    <!-- 使用 v-for 动态展示文字 -->
    <transition name="slide">
      <h1 v-if="showText" class="scrolling-text">
        {{ currentText }}
      </h1>
    </transition>

    <div class="product-grid">
      <div
        v-for="product in products"
        :key="product.id"
        class="product-card"
        @click="goToProductDetails(product)"
      >
        <div class="product-image">
          <!-- /public/img相当于根目录 直接使用/img即可 -->
          <img :src="`../../img/${product.id + 10000}.jpg`" alt="商品图片" />
        </div>
        <div class="product-details">
          <h2 class="product-name">{{ product.name }}</h2>
          <p class="product-description">{{ product.description }}</p>
          <div class="product-price">
            <!-- {{ product.price | currency }} -->
            {{ product.price }}
          </div>
        </div>
        <button class="add-to-cart-btn" @click.stop="addToCart(product.id)">
          加入购物车
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const cart = inject("cart");
    const router = useRouter();
    const products = ref([
      { id: 1, name: "趣尝鲜陕西渭南瑞玉猕猴桃奇异果礼盒 单果110g起18枚", description: "来种出来的水果，皮薄多汁，果肉细腻，香甜多汁。", price: 55.90  },
      { id: 2, name: "真维斯重磅卫衣男款秋冬季青少年加绒加厚一体绒美式潮牌男士连帽外套厚", description: "保暖华棉连帽卫衣", price: 99.90  },
      { id: 3, name: "心相印卷纸纸巾卫生纸厕纸手纸无芯卷筒纸厕所纸家用整箱批发可水溶 4层*70克*10卷", description: "茶语无芯卷纸700克提装", price: 9.90  },
      { id: 4, name: "耕果妙新鲜鹌鹑蛋100颗鹑鸟蛋小鸟蛋 源头直发整箱包邮", description: "新鲜鹌鹑蛋健康生活 拒绝药残 杂粮喂养", price: 24.05  },
      { id: 5, name: "阿司倍鹭（ASVEL）玻璃油壶油瓶不挂油 厨房调味瓶自动开合酱油醋调料瓶 白色650ml", description: "自动开合油壶玻璃材质·不滴不挂", price: 60.00  },
      { id: 6, name: "影腾随身wifi可移动无线wi-fi6免插卡【无需预存】无限制便携式4G高速随行网络通用流量2024款5GHF ", description: "【升级充电款+白色】3000毫安大电池*全国通用", price: 35.00  },
      { id: 7, name: "赠扑克牌+双峰长卷独步天下 梅西传 冯逸明 梅西35岁特别纪念珍藏 梅西自传 ", description: "卡塔尔世界杯后一届体育足球人物传记书籍 物传记书籍", price: 38.43  },
      { id: 8, name: "心相印洗脸巾【肖战推荐】", description: "80抽*3包干湿两用棉柔洁面巾加厚一次性抽取式", price: 29.90  },
      { id: 9, name: "静益乐源新鲜农家圆柿饼 霜降柿饼 ", description: "广西恭城柿饼 1000g独立包装", price: 15.90  },
      { id: 10, name: "驰界type-c数据线快充线6A正品超级闪充电器120W/100W/88W/66W安卓5A适用华为荣耀小米三星vivo套装 ", description: "120W/66W【6A超级快充线】- 1米", price: 6.32  },
      { id: 11, name: "心相印抽纸悬挂式 茶语精选挂抽4层320抽*4提 ", description: "大包挂抽面巾纸擦手纸整箱", price: 27.90  },
      { id: 12, name: "美乐童年儿童水彩笔24色巨可水洗绘画画笔", description: "小学生软头细杆双头无毒幼儿园", price: 69.90 },
      { id: 13, name: "智地智地CUID滴胶卡IC防火墙反复擦写复制可擦写钥匙扣卡NFC手机复制 ", description: "CUID-圆大白", price: 2.80  },
      { id: 14, name: "【全网低价】法拉蒙 笔记本本子A5加厚记事本商务羊巴皮面复古笔记本子工作日记本", description: "会议记录本办公文具可定制 黑色", price: 6.80  },
      { id: 15, name: "parlmu帕蓝姆猫零食猫条60支*15g买", description: "袋装成猫幼猫鲜肉猫湿粮罐头混合口味", price: 19.90  },
      { id: 16, name: "儿童炫彩刮画纸本套装便签本小学生趣味龙年书签涂鸦刮刮画本幼儿园美术创意绘画黑色呱呱画画卡纸刮花刮蜡纸", description: "4款各一本(送刷子+刮画笔)", price: 66.27  },
    ]);

    const texts = [
      "探索时尚潮流，发现独家优惠！",
      "购物即享折扣，快来抢购！",
      "精选商品，限时特惠，错过不再！",
      "时尚新品，品质保证，等你来选！",
    ];

    const currentIndex = ref(0);
    const currentText = ref(texts[currentIndex.value]);
    const showText = ref(true);

    // 定时切换文字
    let intervalId;
    const changeText = () => {
      currentIndex.value = (currentIndex.value + 1) % texts.length;
      currentText.value = texts[currentIndex.value];
      showText.value = false; // 先隐藏文字
      setTimeout(() => {
        showText.value = true; // 然后显示新的文字
      }, 500); // 动画时间
    };

    onMounted(() => {
      intervalId = setInterval(changeText, 5000); // 每5秒切换一次
    });

    onUnmounted(() => {
      clearInterval(intervalId); // 清除定时器
    });

    const goToProductDetails = (product) => {
      router.push({ name: "ProductDetail", params: { id: product.id } });
    };

    const addToCart = (productId) => {
      console.log(`商品 ${productId} 已加入购物车`);
      cart.addToCart(productId);
    };

    return {
      products,
      goToProductDetails,
      addToCart,
      currentText,
      showText,
    };
  },
};
</script>

<style scoped>
.shop-homepage {
  padding: 20px;
  text-align: center;
  margin-top: 50px;
}

/* 过渡动画 */
.slide-enter-active, .slide-leave-active {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.slide-enter, .slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 控制文字的样式 */
.scrolling-text {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.product-card {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.add-to-cart-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.product-card:hover .add-to-cart-btn {
  opacity: 1;
}

.product-image {
  background-color: #f9f9f9;
  height: 150px; /* 固定高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 防止溢出 */
}

.product-image img {
  width: 100%; /* 图片宽度适应父容器 */
  height: 100%; /* 图片高度适应父容器 */
  object-fit: contain; /* 保持图片比例，避免拉伸 */
}

.product-details {
  padding: 10px;
}

.product-name {
  font-size: 16px;
  margin: 10px 0;
}

.product-description {
  font-size: 14px;
  color: #555;
}

.product-price {
  font-size: 18px;
  color: #e91e63;
  margin-top: 5px;
}
</style>
